<template>
  <ContentWrap v-loading="formLoading">
    <el-form
:disabled="true" ref="formRef" :model="formData" :rules="formRules" label-width="100px"
      v-loading="formLoading">
      <el-form-item label="用户昵称" prop="nickname">
        <el-input v-model="formData.nickname" placeholder="请输入用户昵称" />
      </el-form-item>
      <el-form-item label="信息名称" prop="infoName">
        <el-input v-model="formData.infoName" placeholder="请输入信息名称" />
      </el-form-item>
      <el-form-item label="姓名" prop="realName">
        <el-input v-model="formData.realName" placeholder="请输入姓名" />
      </el-form-item>
      <el-form-item label="身份证" prop="idCard">
        <el-input v-model="formData.idCard" placeholder="请输入身份证" />
      </el-form-item>
      <el-form-item label="性别" prop="sex">
        <el-radio-group v-model="formData.sex">
          <el-radio v-for="dict in getIntDictOptions(DICT_TYPE.SYSTEM_USER_SEX)" :key="dict.value" :label="dict.value">
            {{ dict.label }}</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="出生日期" prop="birthday">
        <el-input v-model="formData.birthday" placeholder="请输入出生日期" />
      </el-form-item>
      <el-form-item label="年龄" prop="age">
        <el-input-number v-model="formData.age" placeholder="请输入年龄" />
      </el-form-item>
      <el-form-item label="单图" prop="image">
        <UploadImg v-model="formData.image" :disabled="true" />
      </el-form-item>
      <el-form-item label="多图" prop="images">
        <!-- <el-input v-model="formData.images" placeholder="请输入多图" /> -->
        <!-- <UploadImgs v-model="formData.sliderPicUrls" :disabled="isDetail" /> -->
        <UploadImgs v-model="formData.images" :disabled="true" />
      </el-form-item>
      <el-form-item label="描述" prop="description">
        <Editor v-model="formData.description" height="150px" />
      </el-form-item>
      <!-- <el-form-item label="置顶" prop="isTop">
        <el-input v-model="formData.isTop" placeholder="请输入置顶" />
      </el-form-item> -->
      <!-- <el-form-item label="排序" prop="sort">
        <el-input v-model="formData.sort" placeholder="请输入排序" />
      </el-form-item> -->
    </el-form>
    <!-- <template #footer>
      <el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button>
      <el-button @click="dialogVisible = false">取 消</el-button>
    </template> -->
    <el-form-item style="float: right">
      <el-button @click="close">返回</el-button>
    </el-form-item>
  </ContentWrap>
</template>
<script setup lang="ts">
import { LeaveInfoApi } from '@/api/wine/leaveinfo'
// import { propTypes } from '@/utils/propTypes'
import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
import { useTagsViewStore } from '@/store/modules/tagsView'

/** 发布离职通告 表单 */
defineOptions({ name: 'LeaveInfoForm' })
const { params } = useRoute() // 查询参数
const { delView } = useTagsViewStore() // 视图操作
const { push, currentRoute } = useRouter() // 路由

const dialogVisible = ref(false) // 弹窗的是否展示


// const isDetail=propTypes.bool.def(false)

const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
const formData = ref({
  id: undefined,
  nickname: undefined,
  userId: undefined,
  infoName: undefined,
  realName: undefined,
  idCard: undefined,
  sex: undefined,
  birthday: undefined,
  age: undefined,
  image: undefined,
  images: undefined,
  description: undefined,
  isTop: undefined,
  sort: undefined
})
const formRules = reactive({
})
const formRef = ref() // 表单 Ref



const close = () => {

  delView(unref(currentRoute))
  push({ name: 'LeaveInfo' })
}

onMounted(async () => {
  await getDetail()
})

const getDetail = async () => {
  const id = params.id as unknown as number
  dialogVisible.value = true
  // 修改时，设置数据
  if (id) {
    formLoading.value = true
    try {
      formData.value = await LeaveInfoApi.getLeaveInfo(id)
      formData.value.sex = parseInt(formData.value.sex)
      formData.value.images = formData.value.images.split(',')
      formData.value.description = formData.value.description ? formData.value.description : ''

    } finally {
      formLoading.value = false
    }
  }
}
defineExpose({ open }) // 提供 open 方法，用于打开弹窗

/** 提交表单 */
const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调

</script>